{% extends "section.html" %}

{% block user_info %}
  {% if userAuthenticated %}
    <table id='user-table'>
        <tr>
            <td>
                <div id='user_menu'>
                    <ul>
                        <li><a href='/table'>Table</a></li>
                        <li><a href='/rate'>Rates</a></li>
                        <li><a href='/signout'>Log off</a></li>
                    </ul>
                <!--<img src='../../static/img/user_pic.png' />-->
                </div>
            </td>
            <td>
                <div id='user_info'>
                    <p>{{ user.first_name }} {{ user.last_name }}</p>
                    <ul>
                        <li><a href='/points'>Points:</a>{{ user_points }}</li>
                        <li><a href='/rank'>Rank:</a> {{ user_rank }}   
                            <div class='cards-block'>
                                <img src='../../static/img/yellow_card.png' class='card-image' /> <input type='text' class='user-input' />
                                <img src='../../static/img/red_card.png' class='card-image' /> <input type='text' class='user-input' />
                            </div>
                        </li>
                    </ul>
                </div>
              
            </td>
        </tr>
    </table>
  {% else %}
    <div id='signin'>
      <form method='post' action='/signin/' id='sign_in_form'> {% csrf_token %}
        <table>
            <th colspan=2 class='widget-header'>Sign In</th>
            <tr>
                <td class='form-label'>Email</td>
                <td><input type='text' id='email_input' name='email_input' /></td>
                <td></td>
            </tr>
            <tr>
                <td class='form-label'>Password</td>
                <td><input type='password' id='pass_input' name='pass_input' /></td>
                <td></td>
            </tr>
            <tr>
                <td style='height: 60px;'> </td>
                <td><a href='/forgot_pass' class='link-button'>Forgot Password?</a><input type='submit' id='submit-log-button' value='Sign In' /></td>
                <td></td>
            </tr>
        </table>
        <!-- <div><p class='reg_label'>Email</p><input type='text' id='email_input' /> </div>
        <div>
            <p class='reg_label'>Password</p><input type='text' id='pass-input' />
            <a href='/forgot_pass' style='clear:both;'>Forgot Password?</a>
        </div>
        <input type='submit' value='Sign In' /> -->
      </form>
      <a href='/register'><img src='../../static/img/register_here.png' id='register-button' /></a>
    </div>
  {% endif %}  
{% endblock %}

{% block score_table %}
    <table id='result-table'>
        {% for game in games %}
            {% if game.is_completed %}
                <tr>
                    <td class='date_label'><div>{{ game.date|date:'M j H:i' }}</div></td>
                    <td>
                        <table class='game-element ended-game'>
                             <tr>
                                <td class='flag left'><div><img class='flag_left' src='../../static/img/flags/{{ game.home_team }}.png'></div></td>
                                <td class='country left'><div>{{ game.home_team }}</div></td>
                                <td class='score right'><div class='score-blocked'>1</div></td>
                                <td class='score left'><div class='score-blocked'>1</div></td>
                                <td class='country right'><div>{{ game.guest_team }}</div></td>
                                <td class='flag right'><div><img class='flag_right' src='../../static/img/flags/{{ game.guest_team }}.png'></div></td>
                            </tr>
                        </table>
                    </td>
                    <td class='score_label'><!--<div>+4</div>--></td>
                </tr>
            {% elif game.is_playoff %}
                <tr>
                    <td class='date_label'><div>{{ game.date|date:'M j H:i' }}</div></td>
                    <td>
                        <table class='game-element'>
                             <tr>
                                <td colspan=6>
                                    <div class='playoff-title'>
                                        {{ game.playoff_label }}
                                    </div>
                                </td>
                             </tr>
                             <tr>
                                <td class='flag left' style='width:20px;'><div></div></td>
                                <td class='country left'>
                                    <div>
                                        <select>
                                            {% for team in teams%}
                                            <option>{{ team.team }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </td>
                                <td class='score right'><div><input type='text' id='game-21314-German' /></div></td>
                                <td class='score left'><div><input type='text' id='game-21314-German' /></div></td>
                                <td class='country right'>
                                    <div>
                                        <select>
                                            {% for team in teams%}
                                            <option>{{ team.team }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                </td>
                                <td class='flag right' style='width:20px;'><div> </div></td>
                            </tr>
                        </table>
                    </td>
                    <td class='score_label'><!--<div>+4</div>--></td>
            </tr>
            {% else %}
                <tr>
                    <td class='date_label'><div>{{ game.date|date:'M j H:i' }}</div></td>
                    <td>
                        <table class='game-element'>
                             <tr>
                                <td class='flag left'><div><img class='flag_left' src='../../static/img/flags/{{ game.home_team }}.png'></div></td>
                                <td class='country left'><div>{{ game.home_team }}</div></td>
                                <td class='score right'><div><input type='text' id='game-{{ game.id }}-home' class='input_score' /></div></td>
                                <td class='score left'><div><input type='text' id='game-{{ game.id }}-guest' class='input_score' /></div></td>
                                <td class='country right'><div>{{ game.guest_team }}</div></td>
                                <td class='flag right'><div><img class='flag_right' src='../../static/img/flags/{{ game.guest_team }}.png'></div></td>
                            </tr>
                        </table>
                    </td>
                    <td class='score_label'><!--<div>+4</div>--></td>
                </tr>
            {% endif %}
            
         {% endfor %}
         
        
    </table>    
{% endblock %}
